﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,inital-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no, email=no" />
<title>AG198澳新跨境</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.mobile.min.js"></script>
<script language="javascript" type="text/javascript" src="js/base.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.lazyload.js"></script>
</head>

<body>
<div class="blayer" id="blayer">
<ul class="share-list clearfix">
<li><a href="#" class="area"><span class="imgbox"><img src="images/share-weixin.png"></span><p>微信</p></a></li>
<li><a href="#" class="area"><span class="imgbox"><img src="images/share-pyq.png"></span><p>朋友圈</p></a></li>
<li><a href="#" class="area"><span class="imgbox"><img src="images/share-xlwb.png"></span><p>新浪微博</p></a></li>
<li><a href="#" class="area"><span class="imgbox"><img src="images/share-qzone.png"></span><p>QQ空间</p></a></li>
<li><a href="#" class="area"><span class="imgbox"><img src="images/share-qq.png"></span><p>QQ</p></a></li>
<li><a href="#" class="area"><span class="imgbox"><img src="images/share-txwb.png"></span><p>腾讯微博</p></a></li>
<li><a href="#" class="area"><span class="imgbox"><img src="images/share-msg.png"></span><p>发短信</p></a></li>
<li><a href="#" class="area"><span class="imgbox"><img src="images/share-fzlj.png"></span><p>复制链接</p></a></li>
</ul>
<div class="opn"><a href="javascript:void(0)" class="btn cancel">取消</a></div>
</div>
<div class="layer-bg" id="layer-bg"></div>

<div class="wrap clearfix">
<header class="header bgf">
<div class="name">商品详情</div>
<span class="back" id="back"><i class="icon-back icon"></i></span>
<span class="share-btn" id="share-btn"><i class="icon-share icon icon-24"></i></span>
</header>
<div class="clear"></div>
<!-- header end -->


<div class="h50"></div>
<div class="show-bar" id="show-bar">
<ul>
<li class="active">图片详情</li>
<li>产品参数</li>
</ul>
</div>
<div id="show-cnt" class="clearfix">
<div class="show-tab box clearfix">
<div class="content">
<img src="images/detail1.jpg">
<img src="images/detail2.jpg">
<img src="images/detail3.jpg">
<img src="images/detail4.jpg">
<img src="images/detail5.jpg">
<img src="images/detail6.jpg">
<img src="images/detail7.jpg">
<img src="images/detail8.jpg">
</div>
</div>


<div class="show-tab box clearfix" style="display:none;">
<ul class="xxcs-list clearfix">
<li>
<div class="bt">颜色分类</div>
<div class="text">3件套+礼盒+拎袋</div>
</li>

<li>
<div class="bt">香水分类</div>
<div class="text">香水EDP</div>
</li>

<li>
<div class="bt">净含量</div>
<div class="text">其他/other</div>
</li>

<li>
<div class="bt">香味</div>
<div class="text">柑橘 柠檬 苹果 佛手柑 水蜜桃 覆盆子 睡莲 荷花 玫瑰 茉莉 栀子 鸢尾 橙花 铃兰 Fesenz/风信子 桂花香 熏衣草</div>
</li>

<li>
<div class="bt">香调</div>
<div class="text">花香调 花果香调 树木香调 东方香调 森林香调 海洋香调 琥珀香调 混合香调</div>
</li>

<li>
<div class="bt">规格类型</div>
<div class="text">套装</div>
</li>

<li>
<div class="bt">适用性别</div>
<div class="text">女</div>
</li>

<li>
<div class="bt">品牌</div>
<div class="text">Dior/迪奥</div>
</li>

<li>
<div class="bt">Dior/迪奥单品</div>
<div class="text">明星香水3件套</div>
</li>

<li>
<div class="bt">适合肤质</div>
<div class="text">任何肤质</div>
</li>

<li>
<div class="bt">产地</div>
<div class="text">法国</div>
</li>

<li>
<div class="bt">保质期</div>
<div class="text">3年</div>
</li>
</ul>
</div>

</div>

<div class="clear-bar" id="tariff-box">
<div class="info tab arrow close-btn clearfix">
<i class="ico-arrow active icon"></i>
<span class="bt">税费</span>
</div>

<div class="text-box">本商品适用税率为50%，若订单关税≤50元则免征</div>

</div>

<div class="clear-bar" id="size-box">
<div class="info tab arrow close-btn clearfix">
<i class="ico-arrow active icon"></i>
<span class="bt">颜色</span>
</div>

<dl class="size" id="color">
<dt>颜色</dt>
<dd data-value="黑色" class="active">黑色</dd>
<dd data-value="绿色">绿色</dd>
<dd data-value="红色">红色</dd>
<dd data-value="黄色">黄色</dd>
<dd data-value="白色">白色</dd>
<dd data-value="棕色">棕色</dd>
</dl>

<dl class="size" id="size">
<dt>尺码</dt>
<dd data-value="S" class="active">S</dd>
<dd data-value="M">M</dd>
<dd data-value="L">L</dd>
<dd data-value="XL">XL</dd>
<dd data-value="XXL">XXL</dd>
</dl>
<div class="info bn"><button class="Large btn ok">确认</button></div>
</div>

<div class="clear-bar" id="clear-bar">
<div class="info clearfix">
<div class="imgbox box-sizing"><img src="images/p1.jpg"></div>
<div class="text box-sizing">
<div class="name">Gerber 嘉宝混合水果味酸奶小溶溶豆 宝宝零食 28g</div>
<div class="count-box"><span class="price">¥<font id="unit">99.00</font></span>
<span class="space"></span>
已选 <font id="number" class="black">1</font> 件
</div>
<a href="javascript:void(0);" class="close"><i class="ico-close icon"></i></a>
</div>
</div>
<div class="info tab arrow clearfix" id="slt-size">
<i class="ico-arrow icon"></i>
<span class="bt">颜色、尺码</span>
<span class="dsp" id="size-attr">选择颜色、尺码</span>
</div>

<div class="info tab clearfix">
<span class="bt">数量</span>
<div class="amount">
    <a href="javascript:void(0);" class="Increase" id="Increase"><i class="icon"></i></a>
    <input value="1" type="text" class="inputs" id="buy-num">
    <a href="javascript:void(0);" class="Reduce" id="Reduce"><i class="icon"></i></a>
    </div>
</div>

<div class="info tab clearfix">
<span class="bt">运费</span>
<span class="dsp">至 杭州 免运费</span>
</div>

<div class="info tab arrow clearfix" id="tariff">
<i class="ico-arrow icon"></i>
<span class="bt">税费</span>
<span class="dsp">¥1.40</span>
</div>

<div class="info bn"><a href="order.html" class="Large btn bred">确认购买</a></div>
</div>

<!-- footer begin -->
<div class="clear"></div>
<nav class="bot-nav">
<a href="javascript:void(0);" class="fav-btn br-line box-sizing" id="fav-btn"><i class="ico-fav ico20 icon"></i><p>收藏</p></a>
<a href="car.html" class="fav-btn"><i class="ico-car2 ico20 icon"><span class="car-num" id="car-num">0</span></i><p>购物车</p></a>
<a href="javascript:void(0);" class="ljgm-btn add-car" id="add-car">加入购物车</a>
<a href="javascript:void(0);" class="ljgm-btn" id="ljgm">立即购买</a>
</nav>
</div>

<script language="javascript" type="text/javascript" src="js/fly.js"></script>
<script language="javascript" type="text/javascript" src="js/requestAnimationFrame.js"></script>
<script>
//图片懒加载
$("img.lazy").lazyload({
	 effect:"fadeIn",
	 threshold:200
	 });
$(function(){
$("#ljgm").bind({
	tap:function(){
		$("#clear-bar").addClass("active");
		return false;
		}
		});
		
//加入购物车效果
var x1,y1,x2,y2,flyer,imgpath,money,carnum=0,times,i=0;
function addProduct(event,obj) {
	flyer.fly({
    start: {
        left:x1,
        top:y1
    },
    end:{
        left:x2,
        top:y2,
        width:16,
        height:16
    },
	onEnd:function(){
		$("#"+obj).addClass("active");
		clearTimeout(times);
		times=setTimeout(function(){
			$("#"+obj).remove();
			},6000)
		}
	});
	}
$("#add-car").bind({
	tap:function(event){
		x1=0;
		y1=ph-25;
		x2=$("#car-num").offset().left;
		y2=(ph-45);
		carnum=parseInt($("#car-num").text())+1;
		i++;
		flyer=$('<span class="u-flyer" id="u-flyer-'+i+'">1</span>');
		addProduct(event,"u-flyer-"+i);
		if(carnum<100){
			$("#car-num").text(carnum);
		}
		else{
			$("#car-num").text("99+");
			}
		return false;
		}
	});

$("#fav-btn").bind({
	tap:function(){
		if($(this).find(".ico-fav").hasClass("active")){
			$(this).find(".ico-fav").removeClass("active");
			$(this).find("p").text("收藏");
		}
		else{
			$(this).find(".ico-fav").addClass("active");
			$(this).find("p").text("已收藏");
			}
		return false;
		}
		});
		
$("#clear-bar .close").bind({
	tap:function(){
		$("#clear-bar").removeClass("active");
		return false;
		}
		});

$("#slt-size").bind({
	tap:function(){
		$("#size-box").addClass("active");
		$("#clear-bar").removeClass("active");
		return false;
		}
		});
$("#size-box .close-btn").bind({
	tap:function(){
		$("#size-box").removeClass("active");
		$("#clear-bar").addClass("active");
		return false;
		}
		});

$("#tariff").bind({
	tap:function(){
		$("#tariff-box").addClass("active");
		$("#clear-bar").removeClass("active");
		return false;
		}
		});
$("#tariff-box .close-btn").bind({
	tap:function(){
		$("#tariff-box").removeClass("active");
		$("#clear-bar").addClass("active");
		return false;
		}
		});


$(".size dd").bind({
	tap:function(){
		var jq=$(this).parent(".size").find("dd");
		$(jq).removeClass("active");
		$(this).addClass("active");
		return false;
		}
		});
	$("#size-box .ok").bind({
		tap:function(){
			$("#size-box").removeClass("active");
			$("#clear-bar").addClass("active");
			$("#size-attr").html($("#color dd.active").attr("data-value")+"、"+$("#size dd.active").attr("data-value"));
			return false;
			}
		});

			
	$("#Increase").bind({
		tap:function(){
			var num=parseInt($("#buy-num").val());
			num+=1;
			$("#buy-num").val(num);
			$("#number").text(num);
			return false;
			}
		});
		
	$("#Reduce").bind({
		tap:function(){
			var num=parseInt($("#buy-num").val());
			num-=1;
			if(num<=0) num=1; 
			$("#buy-num").val(num);
			$("#number").text(num);
			return false;
			}
		});
		
	$("#share-btn").bind({
		tap:function(){
			openlayer("layer-bg","blayer");
			return false;
			}
		});
	
	function init(){
		number=getQueryString("num");
		$("#show-cnt .show-tab").fadeOut();
		$("#show-cnt .show-tab").eq(number).fadeIn();
		$("#show-bar ul li").removeClass("active");
		$("#show-bar ul li").eq(number).addClass("active");
	}
	init();//判断链接选项
	
	$("#show-bar ul li").bind({
		tap:function(){
			var idx=$(this).index();
			$("#show-bar ul li").removeClass("active");
			$(this).addClass("active");
			$("#show-cnt .show-tab").fadeOut();
			$("#show-cnt .show-tab").eq(idx).fadeIn();
			$(window).scrollTop(0);
			return false;
			}
		});
		
	});
</script>
</body>
</html>
